<template>
  <div class="keyanPage">
    <div>
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>项目审批</el-breadcrumb-item>
          <el-breadcrumb-item>项目可研评审</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="searchBox">
        <div class="left">
          <el-form label-width="100px" class="searchForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="项目名称" prop="projectName">
                  <el-input placeholder="请输入项目名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="资金来源" prop="capitalSource">
                  <el-select placeholder="请选择资金来源">
                    <el-option label="民政局" value="民政局"></el-option>
                    <el-option label="公安局" value="公安局"></el-option>
                    <el-option label="财政局" value="财政局"></el-option>
                    <el-option label="国税局" value="国税局"></el-option>
                    <el-option label="土地局" value="土地局"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审批状态" prop="currentState">
                  <el-select placeholder="请选择审批状态">
                    <el-option-group
                      v-for="group in stateOptions"
                      :key="group.label"
                      :label="group.label">
                      <el-option
                        v-for="item in group.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="项目类型" prop="projectCategoryName">
                  <el-select placeholder="请选择项目类型">
                    <el-option label="全市发展规划" value="1"></el-option>
                    <el-option label="专项发展规划" value="2"></el-option>
                    <el-option label="软件开发" value="3"></el-option>
                    <el-option label="系统集成" value="4"></el-option>
                    <el-option label="民政局" value="5"></el-option>
                    <el-option label="公安局" value="6"></el-option>
                    <el-option label="财政局" value="7"></el-option>
                    <el-option label="国税局" value="8"></el-option>
                    <el-option label="土地局" value="9"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>
        <div class="right">
          <el-button-group>
            <el-button type="primary">查询</el-button>
            <el-button type="default">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <div class="listBox">

        <el-table
          :data="list"
          style="width: 100%"
          height="500"
          class="mt20"
          @sort-change="onSortChange">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            label="项目名称"
            align="center"
            prop="projectName">
          </el-table-column>
          <el-table-column
            align="center"
            label="项目编号"
            prop="projectNo">
          </el-table-column>
          <el-table-column
            align="center"
            sortable="custom"
            prop="projectBudget"
            label="项目概算">
          </el-table-column>
          <el-table-column
            align="center"
            prop="capitalSource"
            label="资金来源">
          </el-table-column>
          <el-table-column
            align="center"
            prop="capitalSource"
            label="项目类型">
          </el-table-column>
          <el-table-column
            align="center"
            prop="submitTime"
            label="提交单位">
          </el-table-column>

          <el-table-column
            align="center"
            label="审批状态">
            <template slot-scope="scope">
              {{getStateStr(scope.row.currentState)}}
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="toView(scope.row)">查看</el-button>
              <el-button type="text">确认</el-button>
              <el-button type="text">评审</el-button>
              <el-button type="text">批复</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view @success="getList"></router-view>
  </div>
</template>

<script>
  export default {
    name: 'keyan',
    components: {},
    data () {
      return {
        pageSize: 10,
        page: 1,
        total: 0,
        list: [],
        searchForm: {
          projectName: '',
          capitalSource: '',
          currentState: '',
          projectCategoryName: '',
          orderFlag: ''
        },
        searchTime: []
      }
    },
    computed: {
      stateOptions () {
        return [{
          label: '',
          options: [{
            label: '草稿',
            value: 1
          }, {
            label: '已提交',
            value: 2
          }, {
            label: '可研通过',
            value: 99
          }]
        }, {
          label: '可研1000W以下',
          options: [{
            label: '规划处确认',
            value: 10
          }, {
            label: '规划处预审',
            value: 11
          }, {
            label: '规划处联合评审',
            value: 12
          }, {
            label: '批复',
            value: 13
          }]
        }, {
          label: '可研1000W以上',
          options: [{
            label: '规划处确认',
            value: 20
          }, {
            label: '规划处预审',
            value: 21
          }, {
            label: '规划处联合评审',
            value: 22
          }, {
            label: '初审',
            value: 23
          }, {
            label: '市长审定',
            value: 24
          }, {
            label: '批复',
            value: 25
          }]
        }]
      }
    },
    created () {
      // this.getList()
    },
    methods: {
      // /home/shenpi/keyan/querenshenqing
      // /home/shenpi/keyan/yushen

      add () {
        this.$router.push({
          path: '/home/shenpi/keyan/yushen'
        })
      },
      toView (item) {
        this.$router.push({
          path: '/home/shenpi/chushedetail'
        })
        // let viewUrl = '/home/shenpi/keyan/view?id=' + item.processId
        // if (item.processInstanceIdCs) {
        //   viewUrl += '&pid=' + item.processInstanceIdCs
        // }
        // this.$router.push(viewUrl)
      },
      getStateStr (state) {
        let stateStr = ''
        if (state === 1) {
          stateStr = '草稿'
        } else if (state === 2) {
          stateStr = '已提交'
        } else if (state === 10) {
          stateStr = '规划处确认'
        } else if (state === 11) {
          stateStr = '规划处预审'
        } else if (state === 12) {
          stateStr = '规划处联合评审'
        } else if (state === 13) {
          stateStr = '批复'
        } else if (state === 20) {
          stateStr = '规划处确认'
        } else if (state === 21) {
          stateStr = '规划处预审'
        } else if (state === 22) {
          stateStr = '规划处联合评审'
        } else if (state === 23) {
          stateStr = '初审'
        } else if (state === 24) {
          stateStr = '市长审定'
        } else if (state === 25) {
          stateStr = '批复'
        } else if (state === 99) {
          stateStr = '可研通过'
        }
        return stateStr
      },
      handleSizeChange (value) {
        this.pageSize = value
        this.getList()
      },
      handleCurrentChange (value) {
        this.getList(value)
      },
      getList (page) {
        if (page) {
          this.page = page
        }
        let params = Object.assign({}, {
          type: 1,
          pageNumber: this.page,
          pageSize: this.pageSize
        }, this.searchForm)
        if (this.searchTime.length > 0) {
          params['planBeginTime'] = this.searchTime[0]
          params['planEndTime'] = this.searchTime[1]
        }
        this.axios.get('/projectProcess/getList', {
          params
        }).then(res => {
          if (res.code !== 1000) {
            this.$message.error(res.message)
            return
          }
          this.list = res.data.records
          this.total = res.data.total
        })
      },
      resetSearchForm () {
        this.searchForm = {
          projectName: '',
          capitalSource: '',
          currentState: '',
          projectCategoryName: ''
        }
        this.searchTime = []
      },
      onSortChange (target) {
        const { order, prop } = target
        if (prop === 'projectBudget') {
          if (order === 'ascending') {
            this.searchForm.orderFlag = 1
          } else if (order === 'descending') {
            this.searchForm.orderFlag = 2
          } else {
            this.searchForm.orderFlag = ''
          }
        }
        this.page = 1
        this.getList()
      }
    }
  }
</script>

<style lang="less" scoped>
  .keyanPage{
    .searchBox{
      display: flex;
      margin-top: 20px;
      .left{
        flex: 1;
        background: #fff;
        padding: 20px 20px 0;
      }
      .right{
        width: 158px;
        background: #EDF0FA;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .listBox{
      background: #fff;
      margin-top: 20px;
      padding: 20px;
      .pageBox{
        padding-top: 20px;
        text-align: right;
      }
    }

    .btn-area {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
